<template>
  <el-dialog title="货道设置" :visible.sync="aisledialog" width="50%" :before-close="cancel">
    <template>
      <div class="top">
        <el-row>
          <el-col :span="4">货道行数:{{ goodsInfo.type.vmRow }}</el-col>
          <el-col :span="4">货道列数:{{ goodsInfo.type.vmCol }}</el-col>
          <el-col :span="4">货道容量:{{ goodsInfo.type.channelMaxCapacity }}</el-col>
          <el-col :span="4">
            <el-button type="primary" @click="zhidialog">智能排货</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="main">
        <el-row>
          <el-col v-for="item in strategyList" :key="item.channelId" :xs="12" :sm="12" :lg="{ span: '4-8' }">
            <Card :goodsinfo="item" @dialog="adddialog" />
          </el-col>
        </el-row>
      </div>
      <div class="button">
        <div>
          <el-button type="primary" @click="btn">确 定</el-button>
        </div>
      </div>
    </template>
    <el-dialog title="智能排货" :visible.sync="sortdialog" width="50%" :before-close="cancelclose" append-to-body>
      <template>
        <div>该区域属于{{ businessTypeName }}商圈适合销售一下商品：</div>
        <el-row>
          <el-col v-for="item in topList" :key="item.classId" :xs="12" :sm="12" :lg="{ span: '4-8' }">
            <cardTop :goodsinfo="item" />
          </el-col>
        </el-row>
      </template>
      <template #footer>
        <div class="footer">
          <el-button type="warning" @click="cancelclose">采纳建议</el-button>
        </div>
      </template>
    </el-dialog>
    <AddTheGoods :dialog-visible.sync="dialogVisible" />
  </el-dialog>
</template>

<script>
import { channelListAPI, businessTopAPI } from '@/api/vmIndex'
import Card from './card.vue'
import cardTop from './cardTop.vue'
import AddTheGoods from './AddTheGoods.vue'
export default {
  components: {
    Card,
    cardTop,
    AddTheGoods
  },
  props: {
    aisledialog: {
      type: Boolean,
      default: false
    },
    goodsInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      strategyList: [],
      sortdialog: false,
      businessTypeid: 1,
      businessTypeName: '',
      topList: [],
      dialogVisible: false
    }
  },
  watch: {
    goodsInfo(val) {
      console.log(val)
      this.getchannelList()
    }
  },
  methods: {
    async getchannelList() {
      const res = await channelListAPI(this.goodsInfo.innerCode)
      console.log(res)
      this.strategyList = res.data
    },
    btn() {
      this.$emit('update:aisledialog', false)
    },
    cancel() {
      this.$emit('update:aisledialog', false)
      // this.$refs.ruleForm.resetFields()
    },
    async zhidialog() {
      this.businessTypeid = this.goodsInfo.node.businessType.id
      this.businessTypeName = this.goodsInfo.node.businessType.name
      this.sortdialog = true
      console.log(this.goodsInfo)
      const { data } = await businessTopAPI(this.goodsInfo.businessId)
      console.log(data)
      this.topList = data
    },
    cancelclose() {
      this.sortdialog = false
    },
    adddialog(val) {
      console.log(val)
      this.dialogVisible = val
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-left: 100px;
}

.button {
  display: flex;
  justify-content: center;
}

.el-col-lg-4-8 {
  width: 20%;
}

.top {
  height: 50px;
}

.main {
  // height: 400px;

  .el-row {
    overflow-y: scroll;
    height: 200px;

    .el-col {}
  }
}
.footer{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

